<style lang="scss">
  @import "../utils/base.scss";
</style>
<template>
  <div style="height:calc(100vh - 94px);background-color:#FFFFFF;overflow-y:auto;overflow-x:hidden;">
    <div class="qheader">
      <p>主账号管理</p>
    </div>
    <div class="gcontent">
      <Form :model="searchInfo" :label-width="80" label-position="left"
        style="position:relative;left:4%;padding-bottom: 10px">
        <Row>
          <Col span="8">
          <FormItem label="姓名:">
            <Input v-model="searchInfo.peopleName" style="width:70%" @on-enter="search(searchInfo.current)" />
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="4A主账号:">
            <Input v-model="searchInfo.fourA" style="width:70%" @on-enter="search(searchInfo.current)" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
          <FormItem label="联系方式:">
            <Input v-model="searchInfo.phone" style="width:70%" @on-enter="search(searchInfo.current)" />
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="组织名称:">
            <Input v-model="searchInfo.outterCompany" style="width:70%" @on-enter="search(searchInfo.current)" />
          </FormItem>
          </Col>
          <Col span="2">
          <Button type="primary" style="width:5vw;" @click="search(searchInfo.current)">查找</Button>
          </Col>
        </Row>
        <Row>
          <Col span="23">
          <Table border :columns="columns" :data="people">
            <template slot-scope="{ row, index }" slot="peopleType">
              <span v-if="row.peopleType == 0">大数据平台部人员</span>
              <span v-if="row.peopleType == 1">非大数据平台部人员</span>
            </template>
          </Table>
          <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
              <Page :current="searchInfo.current" :total=total show-total show-elevator show-sizer @on-change="search"
                @on-page-size-change="changePageSize"></Page>
            </div>
          </div>
          </Col>
        </Row>
      </Form>
    </div>
  </div>
</template>

<script>
  import ajax from "../ajax_util"
  import Axios from 'axios'
  import accountSecondary from './process_account_secondary'

  export default {
    components: {
      accountSecondary
    },
    data() {
      return {
        peopleList: [{
            key: -1,
            value: "不限"
          },
          {
            key: 0,
            value: "大数据平台部人员"
          },
          {
            key: 1,
            value: "非大数据平台部人员"
          }
        ],
        searchInfo: {
          os: "",
          peopleName: "",
          tenantName: "",
          fourA: "",
          phone: "",
          peopleType: -1,
          igroup: "",
          outterCompany: "",
          current: 1,
          pageSize: 10
        },
        total: 0,
        people: [],
        tabs: {},
        columns: [
          // {
          //     title: '工单号',
          //     key: 'reqId'
          // },
          {
            title: '姓名',
            key: 'peopleName'
          },
          {
            title: '4A主账号',
            key: 'fourA'
          },
          {
            title: '联系方式',
            key: 'phone'
          },
          {
            title: '组织名称',
            key: 'outterCompany'
          },
          {
            title: '工作职责',
            key: 'duty'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 120,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.toSecondary(params.row)
                    }
                  }
                }, '从账号管理')
              ]);
            }
          }
        ],
      }
    },
    created: function() {
      this.tabs = this.$store.state.tabs
    },
    methods: {
      expandRow(index) {
        if (this.people[index].isExpand < 0) {
          this.people[index].isExpand = 0;
        } else {
          this.people[index].isExpand = -1;
        }
      },
      search(page) {
        // var string = JSON.stringify(this.searchInfo);
        // var temp = JSON.parse(string);
        this.searchInfo.current = page;
        //console.log(this.searchInfo)
        this.people = [];
        var that = this;
        var url = this.CONFIG.progress_url + '/account-manager';
        ajax.get({
          url: url,
          that: that,
          params: that.searchInfo,
          success: function(data) {
            console.log("-----data------", data);
            // for(var i=0; i<data.length; i++){
            //     that.people.push(data[i]);
            // }
            that.people = data.records;
            that.total = data.total;
          }
        })
      },
      changePageSize(pageSize) {
        this.searchInfo.pageSize = pageSize;
        this.search(this.searchInfo.current);
      },
      toSecondary(row) {
        var isName = false //是否已经存在标签
        //console.log("----row--------",row);
        if (row.peopleIdList.length > 0) {
          var key = row.peopleIdList[0] + ''
        } else {
          var key = row.reqId + ''
        }

        this.tabs.list.some(item => {
          if (item.tabKey === key) {
            isName = true
            return
          }
        })
        if (!isName) {
          this.tabs.list.push({
            title: "主账号管理 / 从账号管理",
            key: "accountSecondary",
            tabKey: key,
            params: {
              data: row
            }
          })
        }
        this.tabs.isEdit = ""
        this.tabs.tabsPage = key
        this.$store.commit("tabs", this.tabs);
      }
    }
  }
</script>
